<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Badge,
  Button,
  Card,
  Col,
  message,
  Modal,
  Row,
  Select,
  Space,
  Tag,
  Tooltip,
} from 'ant-design-vue';

// 房间状态枚举
enum RoomStatus {
  ACTIVE = 'active', // 活跃 - 绿色
  AVAILABLE = 'available', // 空闲 - 浅蓝色
  LOCKED = 'locked', // 锁定 - 橙色
  MAINTENANCE = 'maintenance', // 维修 - 红色
  OCCUPIED = 'occupied', // 已住 - 灰色
}

// 支付状态枚举
enum PaymentStatus {
  GROUP_OUTSTANDING = 'group_outstanding', // 欠团
  LEAVING_OUTSTANDING = 'leaving_outstanding', // 离欠
  LINKED_OUTSTANDING = 'linked_outstanding', // 欠联
  NORMAL = 'normal', // 正常
  OUTSTANDING = 'outstanding', // 欠费
}

// 房间类型
interface RoomType {
  id: string;
  name: string;
  displayName: string;
}

// 房间数据接口
interface RoomData {
  id: string;
  roomNumber: string;
  roomType: RoomType;
  status: RoomStatus;
  paymentStatus: PaymentStatus;
  occupantName?: string;
  checkInDate?: string;
  checkOutDate?: string;
  outstandingAmount?: number;
  notes?: string;
  building: string;
  floor: string;
  amenities: string[];
  specialIcons: string[];
  isHourlyLeaving?: boolean;
  isOvertime?: boolean;
}

// 筛选条件
const filters = reactive({
  building: 'all',
  floor: 'all',
});

// 统计数据
const statistics = reactive({
  overtimeCount: 88,
  hourlyLeavingCount: 1,
  occupancyRate: 0,
  estimatedOccupancyRate: 0,
});

// 图例模态框状态
const showLegendModal = ref(false);
const modalPosition = reactive({ x: 0, y: 0 });
const isDragging = ref(false);
const dragStart = reactive({ x: 0, y: 0 });

// 房间操作状态
const selectedRoom = ref<null | RoomData>(null);
const showRoomActionModal = ref(false);

// 楼栋选项
const buildingOptions = [
  { label: '全部', value: 'all' },
  { label: '6号楼', value: 'building6' },
  { label: '二期', value: 'phase2' },
  { label: '公寓一期', value: 'apartment1' },
  { label: '一期', value: 'phase1' },
];

// 楼层选项
const floorOptions = [
  { label: '全部', value: 'all' },
  { label: '1楼一期', value: '1f_phase1' },
  { label: '3楼一期', value: '3f_phase1' },
  { label: '3楼2 二期', value: '3f2_phase2' },
  { label: '公寓一期', value: 'apartment1' },
  { label: '11楼 6号楼', value: '11f_building6' },
];

// 房间类型
const roomTypes: RoomType[] = [
  { id: 'standard_twin',name: '标准双床房',displayName: '标准双床房' },
  { id: 'presidential',name: '总统房',displayName: '总统房' },
  { id: 'meeting_room',name: '会议室',displayName: '会议室' },
  { id: 'twin_room',name: '双床房',displayName: '双床房' },
  {
    id: 'non_standard_twin',
    name: '不标准双床房',
    displayName: '不标准双床房',
  },
];

// 模拟房间数据
const roomsData = ref<RoomData[]>([
  // 空闲房间 (浅蓝色)
  {
    id: 'LD999',
    roomNumber: 'LD999',
    roomType: roomTypes[1],
    status: RoomStatus.AVAILABLE,
    paymentStatus: PaymentStatus.NORMAL,
    building: 'building6',
    floor: '11f_building6',
    amenities: ['bed', 'wifi'],
    specialIcons: ['san'],
  },
  {
    id: 'b9s',
    roomNumber: 'b9s',
    roomType: roomTypes[0],
    status: RoomStatus.AVAILABLE,
    paymentStatus: PaymentStatus.NORMAL,
    building: 'phase1',
    floor: '1f_phase1',
    amenities: ['bed', 'key', 'wifi'],
    specialIcons: [],
  },
  // 已住房间 (灰色)
  {
    id: 'b5s',
    roomNumber: 'b5s',
    roomType: roomTypes[0],
    status: RoomStatus.OCCUPIED,
    paymentStatus: PaymentStatus.OUTSTANDING,
    occupantName: '戴练宇',
    outstandingAmount: 320.01,
    building: 'phase1',
    floor: '1f_phase1',
    amenities: ['bed', 'key', 'wifi', 'bell'],
    specialIcons: ['ding'],
  },
  {
    id: 'H41',
    roomNumber: 'H41',
    roomType: roomTypes[2],
    status: RoomStatus.OCCUPIED,
    paymentStatus: PaymentStatus.OUTSTANDING,
    occupantName: '阿萨德 李文龙',
    outstandingAmount: 10.01,
    building: 'phase1',
    floor: '3f_phase1',
    amenities: ['bed', 'wifi'],
    specialIcons: ['hui'],
  },
  // 维修房间 (红色)
  {
    id: 'H46',
    roomNumber: 'H46',
    roomType: roomTypes[1],
    status: RoomStatus.MAINTENANCE,
    paymentStatus: PaymentStatus.NORMAL,
    notes: '维修原因: 789',
    building: 'phase1',
    floor: '3f_phase1',
    amenities: ['bed'],
    specialIcons: ['ah'],
  },
  // 活跃房间 (绿色)
  {
    id: 'H39',
    roomNumber: 'H39',
    roomType: roomTypes[0],
    status: RoomStatus.ACTIVE,
    paymentStatus: PaymentStatus.OUTSTANDING,
    occupantName: '测试用户',
    outstandingAmount: 200,
    notes: '包价测试2',
    building: 'phase1',
    floor: '3f_phase1',
    amenities: ['bed', 'key', 'wifi', 'bell', 'user'],
    specialIcons: ['hai_ji'],
  },
  // 锁定房间 (橙色)
  {
    id: 'b62s',
    roomNumber: 'b62s',
    roomType: roomTypes[0],
    status: RoomStatus.LOCKED,
    paymentStatus: PaymentStatus.NORMAL,
    notes: '锁定原因: 有东西',
    building: 'phase1',
    floor: '3f_phase1',
    amenities: ['bed', 'key'],
    specialIcons: ['j'],
  },
  // 离欠房间
  {
    id: 'b56s',
    roomNumber: 'b56s',
    roomType: roomTypes[0],
    status: RoomStatus.ACTIVE,
    paymentStatus: PaymentStatus.LEAVING_OUTSTANDING,
    occupantName: '离店用户',
    outstandingAmount: 150,
    notes: '1日离',
    building: 'phase1',
    floor: '3f_phase1',
    amenities: ['bed', 'wifi'],
    specialIcons: ['house'],
  },
  // 欠团房间
  {
    id: 'c103s',
    roomNumber: 'c103s',
    roomType: roomTypes[0],
    status: RoomStatus.ACTIVE,
    paymentStatus: PaymentStatus.GROUP_OUTSTANDING,
    occupantName: '团队用户',
    outstandingAmount: 500,
    building: 'phase2',
    floor: '3f2_phase2',
    amenities: ['bed', 'key', 'wifi'],
    specialIcons: ['tuan'],
  },
  // 欠联房间
  {
    id: 'b57s',
    roomNumber: 'b57s',
    roomType: roomTypes[0],
    status: RoomStatus.OCCUPIED,
    paymentStatus: PaymentStatus.LINKED_OUTSTANDING,
    occupantName: '关联用户',
    outstandingAmount: 280,
    building: 'phase1',
    floor: '3f_phase1',
    amenities: ['bed', 'wifi'],
    specialIcons: ['lian'],
  },
]);

// 筛选后的房间数据
const filteredRooms = computed(() => {
  return roomsData.value.filter((room) => {
    const buildingMatch =
      filters.building === 'all' || room.building === filters.building;
    const floorMatch = filters.floor === 'all' || room.floor === filters.floor;
    return buildingMatch && floorMatch;
  });
});

// 获取房间状态颜色
const getRoomStatusColor = (status: RoomStatus) => {
  const colors = {
    [RoomStatus.AVAILABLE]: '#e6f7ff', // 浅蓝色
    [RoomStatus.OCCUPIED]: '#f5f5f5', // 灰色
    [RoomStatus.MAINTENANCE]: '#fff2f0', // 红色
    [RoomStatus.ACTIVE]: '#f6ffed', // 绿色
    [RoomStatus.LOCKED]: '#fff7e6', // 橙色
  };
  return colors[status] || '#f5f5f5';
};

// 获取房间状态边框颜色
const getRoomStatusBorderColor = (status: RoomStatus) => {
  const colors = {
    [RoomStatus.AVAILABLE]: '#1890ff',
    [RoomStatus.OCCUPIED]: '#8c8c8c',
    [RoomStatus.MAINTENANCE]: '#ff4d4f',
    [RoomStatus.ACTIVE]: '#52c41a',
    [RoomStatus.LOCKED]: '#fa8c16',
  };
  return colors[status] || '#d9d9d9';
};

// 获取房间状态文本
const getRoomStatusText = (status: RoomStatus): string => {
  const texts = {
    [RoomStatus.AVAILABLE]: '空闲',
    [RoomStatus.OCCUPIED]: '已住',
    [RoomStatus.ACTIVE]: '活跃',
    [RoomStatus.LOCKED]: '锁定',
    [RoomStatus.MAINTENANCE]: '维修',
  };
  return texts[status] || '未知';
};

// 获取支付状态文本
const getPaymentStatusText = (status: PaymentStatus) => {
  const texts = {
    [PaymentStatus.NORMAL]: '',
    [PaymentStatus.OUTSTANDING]: '欠',
    [PaymentStatus.LEAVING_OUTSTANDING]: '离欠',
    [PaymentStatus.GROUP_OUTSTANDING]: '欠团',
    [PaymentStatus.LINKED_OUTSTANDING]: '欠联',
  };
  return texts[status] || '';
};

// 获取支付状态颜色
const getPaymentStatusColor = (status: PaymentStatus) => {
  return status === PaymentStatus.NORMAL ? 'transparent' : '#ff4d4f';statusPaymentStatus.NORMALstatusPaymentStatus.NORMAL
};

// 获取特殊图标
const getSpecialIcon = (icon: string) => {
  const icons: Record<string, any> = {
    san: { icon: 'mdi:account', color: '#52c41a', text: '散' },
    hui: { icon: 'mdi:bell', color: '#52c41a', text: '会' },
    ding: { icon: 'mdi:alert-circle', color: '#ff4d4f', text: '订' },
    ah: { icon: 'mdi:alert-circle', color: '#ff4d4f', text: '啊' },
    hai_ji: { icon: 'mdi:home', color: '#1890ff', text: '海技' },
    j: { icon: 'mdi:alert-circle', color: '#ff4d4f', text: 'J' },
    house: { icon: 'mdi:home', color: '#1890ff', text: '房' },
    tuan: { icon: 'mdi:account-group', color: '#ff4d4f', text: '团' },
    lian: { icon: 'mdi:account-multiple', color: '#ff4d4f', text: '联' },
  };
  return icons[icon] || null;
};

// 获取设施图标
const getAmenityIcon = (amenity: string) => {
  const icons: Record<string, any> = {
    bed: { icon: 'mdi:bed', color: '#8c8c8c' },
    key: { icon: 'mdi:key', color: '#8c8c8c' },
    wifi: { icon: 'mdi:wifi', color: '#8c8c8c' },
    bell: { icon: 'mdi:bell', color: '#8c8c8c' },
    user: { icon: 'mdi:account', color: '#8c8c8c' },
  };
  return icons[amenity] || null;
};

// 刷新数据
const refreshData = () => {
  message.success('数据已刷新');
  // 这里可以调用API刷新数据
};

// 打印房态表
const printRoomStatus = () => {
  message.info('正在生成房态表...');
  // 这里可以实现打印功能
};

// 远期房态
const showFutureRoomStatus = () => {
  Modal.info({
    title: '远期房态',
    content: '远期房态功能开发中...',
  });
};

// 房务管理
const showRoomServiceManagement = () => {
  Modal.info({
    title: '房务管理',
    content: '房务管理功能开发中...',
  });
};

// 携程改价
const showCtripPriceChange = () => {
  Modal.info({
    title: '携程改价',
    content: '携程改价功能开发中...',
  });
};

// 设置
const showSettings = () => {
  Modal.info({
    title: '设置',
    content: '设置功能开发中...',
  });
};

// 物品管理
const showItemManagement = () => {
  Modal.info({
    title: '物品管理',
    content: '物品管理功能开发中...',
  });
};

// 点击房间
const handleRoomClick = (room: RoomData) => {
  selectedRoom.value = room;
  showRoomActionModal.value = true;
};

// 拖拽事件处理
const handleMouseDown = (e: MouseEvent) => {
  e.preventDefault();
  isDragging.value = true;
  dragStart.x = e.clientX - modalPosition.x;
  dragStart.y = e.clientY - modalPosition.y;
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
};

const handleMouseMove = (e: MouseEvent) => {
  if (isDragging.value) {
    modalPosition.x = e.clientX - dragStart.x;
    modalPosition.y = e.clientY - dragStart.y;
  }
};

const handleMouseUp = () => {
  isDragging.value = false;
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
};

// 房间操作函数
const handleCheckIn = () => {
  if (selectedRoom.value) {
    message.success(`开始为房间 ${selectedRoom.value.roomNumber} 办理入住`);
    showRoomActionModal.value = false;
  }
};

const handleCheckOut = () => {
  if (selectedRoom.value) {
    message.success(`开始为房间 ${selectedRoom.value.roomNumber} 办理退房`);
    showRoomActionModal.value = false;
  }
};

const handleRoomChange = () => {
  if (selectedRoom.value) {
    message.success(`开始为房间 ${selectedRoom.value.roomNumber} 办理换房`);
    showRoomActionModal.value = false;
  }
};

const handleAddCoTenant = () => {
  if (selectedRoom.value) {
    message.success(`开始为房间 ${selectedRoom.value.roomNumber} 添加同住人`);
    showRoomActionModal.value = false;
  }
};

const handleRoomCleaning = () => {
  if (selectedRoom.value) {
    message.success(`开始为房间 ${selectedRoom.value.roomNumber} 安排打扫`);
    showRoomActionModal.value = false;
  }
};

const handleRoomMaintenance = () => {
  if (selectedRoom.value) {
    message.success(`开始为房间 ${selectedRoom.value.roomNumber} 安排维修`);
    showRoomActionModal.value = false;
  }
};

const handleRoomDetails = () => {
  if (selectedRoom.value) {
    Modal.info({
      title: `房间详情 - ${selectedRoom.value.roomNumber}`,
      content: `
        <div>
          <p><strong>房间号:</strong> ${selectedRoom.value.roomNumber}</p>
          <p><strong>房间类型:</strong> ${selectedRoom.value.roomType.displayName}</p>
          <p><strong>状态:</strong> ${selectedRoom.value.status}</p>
          <p><strong>支付状态:</strong> ${selectedRoom.value.paymentStatus}</p>
          ${selectedRoom.value.occupantName ? `<p><strong>入住人:</strong> ${selectedRoom.value.occupantName}</p>` : ''}
          ${selectedRoom.value.outstandingAmount ? `<p><strong>欠费金额:</strong> ¥${selectedRoom.value.outstandingAmount}</p>` : ''}
          ${selectedRoom.value.notes ? `<p><strong>备注:</strong> ${selectedRoom.value.notes}</p>` : ''}
        </div>
      `,
    });
  }
};

onMounted(() => {
  // 初始化数据
  console.log('酒店房间控制台已加载');
});
</script>

<template>
  <div class="hotel-room-dashboard">
    <!-- 顶部筛选和导航栏 -->
    <div class="dashboard-header">
      <div class="filter-section">
        <Space>
          <span class="filter-label">楼栋:</span>
          <Select
            v-model:value="filters.building"
            :options="buildingOptions"
            style="width: 120px"
          />
          <span class="filter-label">楼层:</span>
          <Select
            v-model:value="filters.floor"
            :options="floorOptions"
            style="width: 120px"
          />
        </Space>
      </div>

      <div class="info-section">
        <Space>
          <Badge :count="statistics.overtimeCount" class="status-badge">
            <Button type="text" danger>超时</Button>
          </Badge>
          <Badge :count="statistics.hourlyLeavingCount" class="status-badge">
            <Button type="text" danger>钟点将离</Button>
          </Badge>
          <span class="occupancy-rate">
            出租率实时: {{ statistics.occupancyRate }}% 预计{{
              statistics.estimatedOccupancyRate
            }}%
          </span>
        </Space>
      </div>

      <div class="action-section">
        <Space>
          <Button @click="showItemManagement">物品管理</Button>
          <Button @click="printRoomStatus">
            <template #icon>
              <IconifyIcon icon="mdi:printer" />
            </template>
            打印房态表
          </Button>
          <Button @click="showFutureRoomStatus">远期房态</Button>
          <Button @click="showRoomServiceManagement">房务管理</Button>
          <Button @click="refreshData">
            <template #icon>
              <IconifyIcon icon="mdi:refresh" />
            </template>
            刷新
          </Button>
          <Button @click="showCtripPriceChange">携程改价</Button>
          <Button @click="showSettings">
            <template #icon>
              <IconifyIcon icon="mdi:cog" />
            </template>
            设置
          </Button>
          <Button @click="showLegendModal = true" type="primary">
            <template #icon>
              <IconifyIcon icon="ant-design:question-circle-outlined" />
            </template>
            图例说明
          </Button>
        </Space>
      </div>
    </div>

    <!-- 房间网格 -->
    <div class="room-grid">
      <Row :gutter="[16, 16]">
        <Col
          v-for="room in filteredRooms"
          :key="room.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
          :xxl="3"
        >
          <Card
            class="room-card"
            :style="{
              backgroundColor: getRoomStatusColor(room.status),
              borderColor: getRoomStatusBorderColor(room.status),
            }"
            @click="handleRoomClick(room)"
          >
            <div class="room-content">
              <!-- 房间标识和类型 -->
              <div class="room-header">
                <div class="room-number">{{ room.roomNumber }}</div>
                <div class="room-type">{{ room.roomType.displayName }}</div>
              </div>

              <!-- 特殊图标 (右上角) -->
              <div class="special-icons">
                <Tooltip
                  v-for="icon in room.specialIcons"
                  :key="icon"
                  :title="getSpecialIcon(icon)?.text || icon"
                >
                  <IconifyIcon
                    :icon="getSpecialIcon(icon)?.icon"
                    :style="{ color: getSpecialIcon(icon)?.color }"
                    class="special-icon"
                  />
                </Tooltip>
              </div>

              <!-- 房间信息 -->
              <div class="room-info">
                <div v-if="room.occupantName" class="occupant-name">
                  {{ room.occupantName }}
                </div>
                <div v-if="room.notes" class="room-notes">
                  {{ room.notes }}
                </div>
              </div>
            </div>

            <!-- 底部信息区域 -->
            <div class="bottom-info">
              <!-- 设备信息 (左边) -->
              <div class="device-info">
                <Tooltip
                  v-for="amenity in room.amenities"
                  :key="amenity"
                  :title="amenity"
                >
                  <IconifyIcon
                    :icon="getAmenityIcon(amenity)?.icon"
                    :style="{ color: getAmenityIcon(amenity)?.color }"
                    class="device-icon"
                  />
                </Tooltip>
              </div>

              <!-- 支付欠款信息 (右边) -->
              <div class="payment-info">
                <Tag
                  v-if="room.paymentStatus !== PaymentStatus.NORMAL"
                  :color="getPaymentStatusColor(room.paymentStatus)"
                  class="payment-tag"
                >
                  {{ getPaymentStatusText(room.paymentStatus) }}
                  <span v-if="room.outstandingAmount">
                    ¥{{ room.outstandingAmount }}
                  </span>
                </Tag>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>

    <!-- 图例说明模态框 -->
    <Modal
      v-model:open="showLegendModal"
      title="房间状态图例说明"
      width="800px"
      :footer="null"
      wrap-class-name="draggable-modal"
      :style="{
        position: 'fixed',
        top: `${modalPosition.y}px`,
        left: `${modalPosition.x}px`,
        margin: 0,
        transform: 'none',
      }"
    >
      <template #title>
        <div
          class="modal-drag-handle"
          @mousedown="handleMouseDown"
          style="cursor: move; user-select: none"
        >
          <IconifyIcon icon="ant-design:drag" style="margin-right: 8px" />
          房间状态图例说明
        </div>
      </template>
      <div class="legend-content">
        <div class="legend-section">
          <h4>房间状态颜色说明</h4>
          <div class="legend-grid">
            <div class="legend-item">
              <div
                class="legend-color"
                style="background-color: #e6f7ff; border: 2px solid #1890ff"
              ></div>
              <span>空闲 (浅蓝色)</span>
            </div>
            <div class="legend-item">
              <div
                class="legend-color"
                style="background-color: #d9d9d9; border: 2px solid #8c8c8c"
              ></div>
              <span>已住 (灰色)</span>
            </div>
            <div class="legend-item">
              <div
                class="legend-color"
                style="background-color: #f6ffed; border: 2px solid #52c41a"
              ></div>
              <span>活跃 (绿色)</span>
            </div>
            <div class="legend-item">
              <div
                class="legend-color"
                style="background-color: #fff7e6; border: 2px solid #fa8c16"
              ></div>
              <span>锁定 (橙色)</span>
            </div>
            <div class="legend-item">
              <div
                class="legend-color"
                style="background-color: #fff2f0; border: 2px solid #ff4d4f"
              ></div>
              <span>维修 (红色)</span>
            </div>
          </div>
        </div>

        <div class="legend-section">
          <h4>支付状态标签</h4>
          <div class="legend-grid">
            <div class="legend-item">
              <Tag color="green">正常</Tag>
              <span>正常支付</span>
            </div>
            <div class="legend-item">
              <Tag color="red">欠费</Tag>
              <span>存在欠费</span>
            </div>
            <div class="legend-item">
              <Tag color="orange">离欠</Tag>
              <span>离店欠费</span>
            </div>
            <div class="legend-item">
              <Tag color="purple">欠团</Tag>
              <span>团队欠费</span>
            </div>
            <div class="legend-item">
              <Tag color="blue">欠联</Tag>
              <span>连锁欠费</span>
            </div>
          </div>
        </div>

        <div class="legend-section">
          <h4>特殊图标说明</h4>
          <div class="legend-grid">
            <div class="legend-item">
              <span class="special-icon">⏰</span>
              <span>超时房间</span>
            </div>
            <div class="legend-item">
              <span class="special-icon">🕐</span>
              <span>钟点将离</span>
            </div>
            <div class="legend-item">
              <span class="special-icon">💰</span>
              <span>欠费提醒</span>
            </div>
            <div class="legend-item">
              <span class="special-icon">🔧</span>
              <span>维修中</span>
            </div>
          </div>
        </div>
      </div>
    </Modal>

    <!-- 房间操作模态框 -->
    <Modal
      v-model:open="showRoomActionModal"
      :title="`房间操作 - ${selectedRoom?.roomNumber || ''}`"
      width="700px"
      :footer="null"
      class="room-action-modal"
    >
      <div v-if="selectedRoom" class="room-action-content">
        <!-- 房间基本信息卡片 -->
        <div class="room-info-card">
          <div class="room-header">
            <div class="room-number-badge">
              <IconifyIcon icon="ant-design:home-outlined" />
              <span>{{ selectedRoom.roomNumber }}</span>
            </div>
            <div class="status-indicator">
              <div
                class="status-dot"
                :style="{
                  backgroundColor: getRoomStatusBorderColor(
                    selectedRoom.status,
                  ),
                }"
              ></div>
              <span class="status-text">{{
                getRoomStatusText(selectedRoom.status)
              }}</span>
            </div>
          </div>

          <div class="room-details">
            <div class="detail-row">
              <div class="detail-item">
                <IconifyIcon
                  icon="ant-design:tag-outlined"
                  class="detail-icon"
                />
                <span class="detail-label">房间类型</span>
                <span class="detail-value">{{
                  selectedRoom.roomType.displayName
                }}</span>
              </div>
              <div class="detail-item" v-if="selectedRoom.occupantName">
                <IconifyIcon
                  icon="ant-design:user-outlined"
                  class="detail-icon"
                />
                <span class="detail-label">入住人</span>
                <span class="detail-value">{{
                  selectedRoom.occupantName
                }}</span>
              </div>
            </div>

            <div class="detail-row" v-if="selectedRoom.outstandingAmount">
              <div class="detail-item warning">
                <IconifyIcon
                  icon="ant-design:exclamation-circle-outlined"
                  class="detail-icon"
                />
                <span class="detail-label">欠费金额</span>
                <span class="detail-value amount"
                  >¥{{ selectedRoom.outstandingAmount }}</span
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮区域 -->
        <div class="action-section">
          <div class="section-title">
            <IconifyIcon icon="ant-design:thunderbolt-outlined" />
            <span>快速操作</span>
          </div>

          <div class="action-grid">
            <!-- 空闲房间操作 -->
            <template v-if="selectedRoom.status === 'available'">
              <div class="action-card primary" @click="handleCheckIn">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:user-add-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">安排入住</div>
                  <div class="action-desc">为新客人办理入住手续</div>
                </div>
              </div>

              <div class="action-card" @click="handleRoomCleaning">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:tool-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">安排打扫</div>
                  <div class="action-desc">安排清洁人员打扫房间</div>
                </div>
              </div>

              <div class="action-card" @click="handleRoomMaintenance">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:setting-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">安排维修</div>
                  <div class="action-desc">安排维修人员检查设备</div>
                </div>
              </div>
            </template>

            <!-- 已住房间操作 -->
            <template v-if="selectedRoom.status === 'occupied'">
              <div class="action-card primary" @click="handleCheckOut">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:user-delete-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">办理退房</div>
                  <div class="action-desc">为客人办理退房手续</div>
                </div>
              </div>

              <div class="action-card" @click="handleRoomChange">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:swap-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">办理换房</div>
                  <div class="action-desc">为客人更换房间</div>
                </div>
              </div>

              <div class="action-card" @click="handleAddCoTenant">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:team-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">添加同住人</div>
                  <div class="action-desc">为房间添加额外住客</div>
                </div>
              </div>

              <div class="action-card" @click="handleRoomCleaning">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:tool-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">安排打扫</div>
                  <div class="action-desc">安排清洁人员打扫房间</div>
                </div>
              </div>
            </template>

            <!-- 维修房间操作 -->
            <template v-if="selectedRoom.status === 'maintenance'">
              <div class="action-card primary" @click="handleRoomMaintenance">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:setting-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">查看维修进度</div>
                  <div class="action-desc">查看当前维修状态</div>
                </div>
              </div>

              <div class="action-card" @click="handleRoomCleaning">
                <div class="action-icon">
                  <IconifyIcon icon="ant-design:tool-outlined" />
                </div>
                <div class="action-content">
                  <div class="action-title">安排打扫</div>
                  <div class="action-desc">维修完成后安排清洁</div>
                </div>
              </div>
            </template>

            <!-- 通用操作 -->
            <div class="action-card secondary" @click="handleRoomDetails">
              <div class="action-icon">
                <IconifyIcon icon="ant-design:info-circle-outlined" />
              </div>
              <div class="action-content">
                <div class="action-title">查看详情</div>
                <div class="action-desc">查看房间详细信息</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<style scoped>
/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 16px;
  }

  .filter-section,
  .info-section,
  .action-section {
    justify-content: center;
    width: 100%;
  }

  .room-card {
    height: 180px;
  }

  .room-number {
    font-size: 14px;
  }

  .room-type {
    font-size: 11px;
  }
}

.hotel-room-dashboard {
  min-height: 100vh;
  padding: 16px;
  background-color: #f0f2f5;
}

.legend-content {
  max-height: 500px;
  overflow-y: auto;
}

.legend-section {
  margin-bottom: 24px;
}

.legend-section h4 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.legend-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background-color: #fafafa;
  border-radius: 6px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.special-icon {
  font-size: 16px;
}

/* 拖拽模态框样式 */
:deep(.draggable-modal) {
  .ant-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

.modal-drag-handle {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-weight: 600;
  color: #262626;
}

.modal-drag-handle:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 房间操作模态框样式 */
.room-action-modal .ant-modal-content {
  overflow: hidden;
  border-radius: 12px;
}

.room-action-modal .ant-modal-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
}

.room-action-modal .ant-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.room-action-modal .ant-modal-close {
  color: white;
}

.room-action-modal .ant-modal-close:hover {
  background-color: rgb(255 255 255 / 10%);
  border-radius: 6px;
}

.room-action-content {
  max-height: 600px;
  padding: 24px;
  overflow-y: auto;
}

/* 房间信息卡片 */
.room-info-card {
  padding: 12px;
  margin-bottom: 24px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
}

.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.room-number-badge {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  background: #f0f2f5;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.status-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 12px;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
}

.status-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
}

.room-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: rgb(255 255 255 / 80%);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.detail-item:hover {
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.detail-item.warning {
  background: rgb(255 77 79 / 10%);
  border-left: 4px solid #ff4d4f;
}

.detail-icon {
  min-width: 20px;
  font-size: 18px;
  color: #667eea;
}

.detail-item.warning .detail-icon {
  color: #ff4d4f;
}

.detail-label {
  min-width: 80px;
  font-weight: 500;
  color: #666;
}

.detail-value {
  font-weight: 500;
  color: #2c3e50;
}

.detail-value.amount {
  font-size: 16px;
  font-weight: 600;
  color: #ff4d4f;
}

/* 操作区域 */
.action-section {
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
}

.section-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.section-title .anticon {
  font-size: 20px;
  color: #667eea;
}

.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.action-card {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  min-width: 120px;
  padding: 8px 12px;
  cursor: pointer;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
}

.action-card:hover {
  background: white;
  border-color: #667eea;
}

.action-card.primary {
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-card.primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  border-color: #5a6fd8;
}

.action-card.secondary {
  color: white;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-card.secondary:hover {
  background: linear-gradient(135deg, #e085e8 0%, #e54b5f 100%);
  border-color: #e085e8;
}

.action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  background: rgb(255 255 255 / 20%);
  border-radius: 6px;
}

.action-card:not(.primary):not(.secondary) .action-icon {
  color: white;
  background: #667eea;
}

.action-content {
  flex: 1;
}

.action-title {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
}

.action-desc {
  display: none;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.filter-section {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 8px;
  font-weight: 500;
}

.info-section {
  display: flex;
  align-items: center;
}

.status-badge {
  margin-right: 16px;
}

.occupancy-rate {
  font-weight: 500;
  color: #1890ff;
}

.action-section {
  display: flex;
  align-items: center;
}

.room-grid {
  padding: 16px;
  overflow: hidden;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.room-grid .ant-row {
  margin: 0 !important;
}

.room-grid .ant-col {
  padding: 8px !important;
}

/* .room-card .ant-card-body {
  padding: 12px !important;
} */

:deep(.room-card .ant-card-body) {
  padding: 12px !important;
}

.room-card {
  height: 200px;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.room-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transform: translateY(-2px);
}

.room-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 44px;
}

.room-header {
  padding: 6px 0;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.room-number {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
  color: #262626;
  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.room-type {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  color: #8c8c8c;
  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  background: #f5f5f5;
  border-radius: 12px;
}

.special-icons {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: flex;
  gap: 2px;
}

.special-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.room-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
  height: 40px;
  margin: 6px 0;
}

.occupant-name {
  padding: 3px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  background: #e6f7ff;
  border-left: 3px solid #1890ff;
  border-radius: 4px;
}

.room-notes {
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.3;
  color: #8c8c8c;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 3px;
}

.bottom-info {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 4px 8px;
}

.device-info {
  display: flex;
  gap: 3px;
  align-items: center;
}

.device-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.payment-info {
  display: flex;
  align-items: center;
}

.payment-tag {
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
}
</style>
